<template>
	<view class="result-container">
		<!-- 顶部导航栏 -->
		<view class="top-nav" :style="{ top: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
		</view>

		<!-- 结果卡片 -->
		<view class="result-card">
			<!-- 成绩图标 -->
			<view class="score-icon">
				<text class="icon-text">{{ scoreEmoji }}</text>
			</view>

			<!-- 分数 -->
			<view class="score-section">
				<text class="score-label">您的得分</text>
				<text class="score-value">{{ score }}</text>
				<text class="score-unit">分</text>
			</view>

			<!-- 评价 -->
			<text class="score-comment">{{ scoreComment }}</text>

			<!-- 统计信息 -->
			<view class="stats-grid">
				<view class="stat-item">
					<text class="stat-icon">✅</text>
					<text class="stat-value">{{ correctCount }}</text>
					<text class="stat-label">答对</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">❌</text>
					<text class="stat-value">{{ wrongCount }}</text>
					<text class="stat-label">答错</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">📊</text>
					<text class="stat-value">{{ accuracy }}%</text>
					<text class="stat-label">正确率</text>
				</view>
				<view class="stat-item">
					<text class="stat-icon">⏱</text>
					<text class="stat-value">{{ formatTime(timeUsed) }}</text>
					<text class="stat-label">用时</text>
				</view>
			</view>

			<!-- 进度环 -->
			<view class="progress-ring">
				<view class="ring-bg"></view>
				<view class="ring-fill" :style="{ transform: `rotate(${(accuracy / 100) * 360}deg)` }"></view>
				<view class="ring-center">
					<text class="ring-text">{{ accuracy }}%</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="action-btn secondary-btn" @click="handleBackToList">
				<text class="btn-icon">📋</text>
				<text class="btn-text">返回列表</text>
			</button>
			<button class="action-btn primary-btn" @click="handleRetry">
				<text class="btn-icon">🔄</text>
				<text class="btn-text">再测一次</text>
			</button>
		</view>

		<!-- 鼓励文字 -->
		<view class="encouragement">
			<text class="encouragement-text">{{ encouragementText }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';

	// 测试结果数据
	const score = ref(0);
	const correctCount = ref(0);
	const totalCount = ref(0);
	const accuracy = ref(0);
	const timeUsed = ref(0);
	const techId = ref('');
	const categories = ref('');

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});

	// 错误数量
	const wrongCount = computed(() => {
		return totalCount.value - correctCount.value;
	});

	// 分数表情
	const scoreEmoji = computed(() => {
		if (score.value >= 90) return '🎉';
		if (score.value >= 80) return '😊';
		if (score.value >= 60) return '😐';
		return '😔';
	});

	// 分数评价
	const scoreComment = computed(() => {
		if (score.value >= 90) return '太棒了！';
		if (score.value >= 80) return '很不错！';
		if (score.value >= 60) return '还需努力！';
		return '加油！';
	});

	// 鼓励文字
	const encouragementText = computed(() => {
		if (score.value >= 90) {
			return '恭喜你！已经掌握得非常好了，继续保持！';
		} else if (score.value >= 80) {
			return '做得很好！再接再厉，向满分冲刺！';
		} else if (score.value >= 60) {
			return '继续努力！多做练习，一定能提高！';
		} else {
			return '不要气馁！重新学习知识点，再来挑战！';
		}
	});

	// 页面加载
	onLoad((options: any) => {
		score.value = parseInt(options.score || '0');
		correctCount.value = parseInt(options.correctCount || '0');
		totalCount.value = parseInt(options.totalCount || '0');
		accuracy.value = parseInt(options.accuracy || '0');
		timeUsed.value = parseInt(options.timeUsed || '0');
		techId.value = options.techId || '';
		categories.value = options.categories || '';
	});

	// 格式化时间
	const formatTime = (seconds: number): string => {
		const mins = Math.floor(seconds / 60);
		const secs = seconds % 60;
		return `${mins}'${secs}"`;
	};

	// 返回上一页
	const handleGoBack = () => {
		uni.navigateBack();
	};

	// 返回列表
	const handleBackToList = () => {
		uni.switchTab({
			url: '/pages/exam/index'
		});
	};

	// 再测一次
	const handleRetry = () => {
		if (techId.value && categories.value) {
			uni.redirectTo({
				url: `/pages/exam/test?techId=${techId.value}&categories=${categories.value}`
			});
		} else {
			// 如果没有参数，返回分类选择页面
			uni.navigateBack();
		}
	};
</script>

<style lang="scss" scoped>
	.result-container {
		min-height: 100vh;
		background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	/**
	 * 顶部导航栏
	 */
	.top-nav {
		position: absolute;
		left: 24rpx;
		z-index: 10;
		box-sizing: border-box;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.92);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.25);
		}
	}

	.back-icon {
		font-size: 44rpx;
		color: #2c3e50;
		font-weight: 700;
	}

	/**
	 * 结果卡片
	 */
	.result-card {
		width: 100%;
		background: white;
		border-radius: 32rpx;
		padding: 48rpx 32rpx;
		box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 32rpx;
		position: relative;
	}

	/**
	 * 成绩图标
	 */
	.score-icon {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #fff9e6 0%, #ffe9a0 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 32rpx;
		box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.3);
	}

	.icon-text {
		font-size: 72rpx;
	}

	/**
	 * 分数区域
	 */
	.score-section {
		display: flex;
		align-items: baseline;
		gap: 8rpx;
		margin-bottom: 16rpx;
	}

	.score-label {
		font-size: 28rpx;
		color: #64748b;
		font-weight: 600;
	}

	.score-value {
		font-size: 96rpx;
		font-weight: 900;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		line-height: 1;
	}

	.score-unit {
		font-size: 32rpx;
		color: #64748b;
		font-weight: 600;
	}

	/**
	 * 评价
	 */
	.score-comment {
		font-size: 32rpx;
		font-weight: 700;
		color: #667eea;
		margin-bottom: 40rpx;
	}

	/**
	 * 统计网格
	 */
	.stats-grid {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 16rpx;
		margin-bottom: 40rpx;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8rpx;
		padding: 20rpx 8rpx;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		border-radius: 16rpx;
	}

	.stat-icon {
		font-size: 32rpx;
	}

	.stat-value {
		font-size: 28rpx;
		font-weight: 800;
		color: #1a202c;
	}

	.stat-label {
		font-size: 20rpx;
		color: #64748b;
		font-weight: 600;
	}

	/**
	 * 进度环
	 */
	.progress-ring {
		width: 200rpx;
		height: 200rpx;
		position: relative;
		margin-top: 20rpx;
	}

	.ring-bg {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 16rpx solid #e9ecef;
	}

	.ring-fill {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 16rpx solid transparent;
		border-top-color: #667eea;
		border-right-color: #667eea;
		transform-origin: center;
		transition: transform 1s ease;
	}

	.ring-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 140rpx;
		height: 140rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ring-text {
		font-size: 40rpx;
		font-weight: 900;
		color: #667eea;
	}

	/**
	 * 操作按钮
	 */
	.action-buttons {
		width: 100%;
		display: flex;
		gap: 20rpx;
		margin-bottom: 32rpx;
	}

	.action-btn {
		flex: 1;
		height: 96rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.97);
		}
	}

	.secondary-btn {
		background: white;
	}

	.primary-btn {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	}

	.btn-icon {
		font-size: 36rpx;
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 700;
	}

	.secondary-btn .btn-text {
		color: #667eea;
	}

	.primary-btn .btn-text {
		color: white;
	}

	/**
	 * 鼓励文字
	 */
	.encouragement {
		text-align: center;
		padding: 24rpx 32rpx;
	}

	.encouragement-text {
		font-size: 28rpx;
		color: white;
		line-height: 1.6;
		font-weight: 600;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
</style>

